<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暖心档案 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <h1 class="header-title">暖心档案</h1>
            <button class="header-action" onclick="window.location.href='settings.html'">
                <i class="fas fa-cog"></i>
            </button>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Profile Card -->
            <div class="card card-gradient mb-6 text-center">
                <div class="mb-4">
                    <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-4xl mb-3 mx-auto">
                        🐱
                    </div>
                    <h2 class="text-xl font-semibold mb-1">暖心用户</h2>
                    <p class="text-sm opacity-90">
                        <i class="fas fa-calendar mr-1"></i>
                        已加入 15 天
                    </p>
                </div>
                <div class="flex justify-center">
                    <div class="currency-badge text-lg">
                        <i class="fas fa-coins mr-2"></i>
                        <span id="userCurrency">128</span> 暖心币
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="card text-center">
                    <div class="text-2xl font-bold text-primary mb-1">23</div>
                    <div class="text-sm text-neutral-600">发布日记</div>
                    <div class="text-xs text-neutral-500">本月 +5</div>
                </div>
                <div class="card text-center">
                    <div class="text-2xl font-bold text-secondary mb-1">156</div>
                    <div class="text-sm text-neutral-600">收到暖心</div>
                    <div class="text-xs text-neutral-500">本月 +23</div>
                </div>
                <div class="card text-center">
                    <div class="text-2xl font-bold text-warning-500 mb-1">89</div>
                    <div class="text-sm text-neutral-600">给出暖心</div>
                    <div class="text-xs text-neutral-500">本月 +18</div>
                </div>
                <div class="card text-center">
                    <div class="text-2xl font-bold text-success-500 mb-1">45</div>
                    <div class="text-sm text-neutral-600">公益贡献</div>
                    <div class="text-xs text-neutral-500">本月 +12</div>
                </div>
            </div>

            <!-- Currency Section -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-wallet mr-2 text-primary"></i>
                    暖心钱包
                </h3>
                <div class="bg-gradient-to-r from-primary-50 to-secondary-50 rounded-lg p-4 mb-4">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <div class="text-sm text-neutral-600">当前余额</div>
                            <div class="text-2xl font-bold text-primary">128 暖心币</div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm text-neutral-600">本月获得</div>
                            <div class="text-lg font-semibold text-success-500">+47</div>
                        </div>
                    </div>
                    <div class="w-full bg-white bg-opacity-50 rounded-full h-2">
                        <div class="bg-primary-500 h-2 rounded-full" style="width: 64%;"></div>
                    </div>
                    <div class="text-xs text-neutral-600 mt-1">距离下个等级还需要 72 暖心币</div>
                </div>
                
                <div class="space-y-3">
                    <div class="text-sm font-medium text-neutral-700 mb-2">获取途径</div>
                    <div class="flex items-center justify-between py-2 border-b border-neutral-100">
                        <div class="flex items-center">
                            <i class="fas fa-pen text-primary mr-2"></i>
                            <span class="text-sm">发布日记</span>
                        </div>
                        <span class="text-sm text-success-500">+3 币</span>
                    </div>
                    <div class="flex items-center justify-between py-2 border-b border-neutral-100">
                        <div class="flex items-center">
                            <i class="fas fa-comment text-secondary mr-2"></i>
                            <span class="text-sm">暖心点评</span>
                        </div>
                        <span class="text-sm text-success-500">+5 币</span>
                    </div>
                    <div class="flex items-center justify-between py-2 border-b border-neutral-100">
                        <div class="flex items-center">
                            <i class="fas fa-heart text-error-500 mr-2"></i>
                            <span class="text-sm">收到点赞</span>
                        </div>
                        <span class="text-sm text-success-500">+2 币</span>
                    </div>
                    <div class="flex items-center justify-between py-2">
                        <div class="flex items-center">
                            <i class="fas fa-star text-warning-500 mr-2"></i>
                            <span class="text-sm">入选精选</span>
                        </div>
                        <span class="text-sm text-success-500">+20 币</span>
                    </div>
                </div>
            </div>

            <!-- Achievement Section -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-trophy mr-2 text-warning-500"></i>
                    成就徽章
                </h3>
                <div class="grid grid-cols-3 gap-4">
                    <!-- 已获得徽章 -->
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-warning-400 to-warning-600 rounded-full flex items-center justify-center text-white text-xl mb-2 mx-auto">
                            🌟
                        </div>
                        <div class="text-xs font-medium">新手作家</div>
                        <div class="text-xs text-neutral-500">发布10篇日记</div>
                    </div>
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-secondary-400 to-secondary-600 rounded-full flex items-center justify-center text-white text-xl mb-2 mx-auto">
                            💝
                        </div>
                        <div class="text-xs font-medium">暖心天使</div>
                        <div class="text-xs text-neutral-500">点评50次</div>
                    </div>
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-success-400 to-success-600 rounded-full flex items-center justify-center text-white text-xl mb-2 mx-auto">
                            🌱
                        </div>
                        <div class="text-xs font-medium">公益新星</div>
                        <div class="text-xs text-neutral-500">参与3个项目</div>
                    </div>
                    
                    <!-- 未获得徽章 -->
                    <div class="text-center opacity-50">
                        <div class="w-16 h-16 bg-neutral-200 rounded-full flex items-center justify-center text-neutral-400 text-xl mb-2 mx-auto">
                            🔥
                        </div>
                        <div class="text-xs font-medium">影响力达人</div>
                        <div class="text-xs text-neutral-500">收到200个赞</div>
                    </div>
                    <div class="text-center opacity-50">
                        <div class="w-16 h-16 bg-neutral-200 rounded-full flex items-center justify-center text-neutral-400 text-xl mb-2 mx-auto">
                            👑
                        </div>
                        <div class="text-xs font-medium">精选达人</div>
                        <div class="text-xs text-neutral-500">5篇精选文章</div>
                    </div>
                    <div class="text-center opacity-50">
                        <div class="w-16 h-16 bg-neutral-200 rounded-full flex items-center justify-center text-neutral-400 text-xl mb-2 mx-auto">
                            🌍
                        </div>
                        <div class="text-xs font-medium">公益大使</div>
                        <div class="text-xs text-neutral-500">贡献500暖心币</div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-clock mr-2 text-primary"></i>
                    最近活动
                </h3>
                <div class="space-y-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-pen text-primary text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <div class="text-sm font-medium">发布了日记《今天的阳光很温暖》</div>
                            <div class="text-xs text-neutral-500">1小时前</div>
                        </div>
                        <div class="text-xs text-success-500">+3 币</div>
                    </div>
                    
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-secondary-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-comment text-secondary text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <div class="text-sm font-medium">给漂流日记写了暖心点评</div>
                            <div class="text-xs text-neutral-500">3小时前</div>
                        </div>
                        <div class="text-xs text-success-500">+5 币</div>
                    </div>
                    
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-warning-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-gift text-warning-500 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <div class="text-sm font-medium">参与了《山区儿童图书捐赠》项目</div>
                            <div class="text-xs text-neutral-500">昨天</div>
                        </div>
                        <div class="text-xs text-error-500">-50 币</div>
                    </div>
                    
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-success-100 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-star text-success-500 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <div class="text-sm font-medium">日记入选每日精选</div>
                            <div class="text-xs text-neutral-500">2天前</div>
                        </div>
                        <div class="text-xs text-success-500">+20 币</div>
                    </div>
                </div>
                
                <button class="btn-text w-full mt-4">
                    查看完整记录 <i class="fas fa-chevron-right icon-xs ml-1"></i>
                </button>
            </div>

            <!-- Quick Actions -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <button onclick="window.location.href='store.html'" class="card card-hover text-center">
                    <i class="fas fa-shopping-cart text-2xl text-primary mb-2"></i>
                    <div class="font-medium text-sm">暖心商城</div>
                    <div class="text-xs text-neutral-500">用暖心币做公益</div>
                </button>
                <button onclick="window.location.href='daily-featured.html'" class="card card-hover text-center">
                    <i class="fas fa-crown text-2xl text-warning-500 mb-2"></i>
                    <div class="font-medium text-sm">我的精选</div>
                    <div class="text-xs text-neutral-500">查看精选内容</div>
                </button>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="bottom-nav">
            <a href="home.html" class="nav-item" data-page="home">
                <i class="fas fa-home nav-icon"></i>
                <span class="nav-label">树洞</span>
            </a>
            <a href="drift.html" class="nav-item" data-page="drift">
                <i class="fas fa-compass nav-icon"></i>
                <span class="nav-label">漂流</span>
            </a>
            <a href="profile.html" class="nav-item active" data-page="profile">
                <i class="fas fa-heart nav-icon"></i>
                <span class="nav-label">暖心</span>
            </a>
            <a href="store.html" class="nav-item" data-page="store">
                <i class="fas fa-gift nav-icon"></i>
                <span class="nav-label">商城</span>
            </a>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 个人中心页面管理器
        class ProfilePageManager {
            constructor() {
                this.init();
            }

            init() {
                this.loadUserData();
                this.initAnimations();
                this.bindEvents();
            }

            loadUserData() {
                if (window.App && App.data.user) {
                    const user = App.data.user;
                    
                    // 更新货币显示
                    const currencyElement = document.getElementById('userCurrency');
                    if (currencyElement) {
                        currencyElement.textContent = user.currency;
                    }
                    
                    // 可以在这里更新其他用户数据
                    console.log('用户数据已加载:', user);
                }
            }

            initAnimations() {
                // 为卡片添加渐入动画
                const cards = document.querySelectorAll('.card');
                cards.forEach((card, index) => {
                    setTimeout(() => {
                        card.style.animation = 'fadeInUp 0.5s ease forwards';
                    }, index * 100);
                });
            }

            bindEvents() {
                // 徽章点击事件
                const achievements = document.querySelectorAll('.grid > div');
                achievements.forEach(achievement => {
                    achievement.addEventListener('click', () => {
                        if (!achievement.classList.contains('opacity-50')) {
                            this.showAchievementDetail(achievement);
                        }
                    });
                });
            }

            showAchievementDetail(achievement) {
                const title = achievement.querySelector('.font-medium').textContent;
                const description = achievement.querySelector('.text-neutral-500').textContent;
                
                // 这里可以显示详细的成就信息
                App.utils.showToast(`🎉 ${title}: ${description}`, 'success');
            }

            // 更新用户统计数据
            updateStats(newStats) {
                const statElements = {
                    diaries: document.querySelector('.text-primary'),
                    heartsReceived: document.querySelector('.text-secondary'),
                    heartsGiven: document.querySelector('.text-warning-500'),
                    charity: document.querySelector('.text-success-500')
                };

                if (newStats.diariesCount && statElements.diaries) {
                    this.animateNumber(statElements.diaries, newStats.diariesCount);
                }
                
                // 类似地更新其他统计数据...
            }

            animateNumber(element, targetNumber) {
                const startNumber = parseInt(element.textContent) || 0;
                const duration = 1000; // 1秒
                const step = (targetNumber - startNumber) / (duration / 16); // 60fps
                let current = startNumber;
                
                const timer = setInterval(() => {
                    current += step;
                    if ((step > 0 && current >= targetNumber) || (step < 0 && current <= targetNumber)) {
                        current = targetNumber;
                        clearInterval(timer);
                    }
                    element.textContent = Math.round(current);
                }, 16);
            }
        }

        // 页面特定功能
        let profileManager;
        
        document.addEventListener('DOMContentLoaded', function() {
            profileManager = new ProfilePageManager();
        });

        // 编辑昵称功能
        function editNickname() {
            const currentNickname = '暖心用户';
            const newNickname = prompt('请输入新的昵称:', currentNickname);
            
            if (newNickname && newNickname.trim() && newNickname !== currentNickname) {
                // 这里可以保存新昵称
                App.utils.showToast('昵称修改成功!', 'success');
                // 更新显示
                document.querySelector('.text-xl').textContent = newNickname.trim();
            }
        }

        // 分享个人档案
        function shareProfile() {
            if (navigator.share) {
                navigator.share({
                    title: '我的暖言树洞档案',
                    text: '来看看我在暖言树洞的温暖足迹！',
                    url: window.location.href
                });
            } else {
                App.utils.showToast('个人档案链接已复制到剪贴板', 'success');
            }
        }
    </script>

    <style>
        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        /* 间距 */
        .space-y-3 > * + * {
            margin-top: 0.75rem;
        }

        .space-y-4 > * + * {
            margin-top: 1rem;
        }

        /* 渐变背景 */
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--bg-start), var(--bg-end));
        }

        .bg-gradient-to-br {
            background-image: linear-gradient(to bottom right, var(--bg-start), var(--bg-end));
        }

        .from-primary-50 {
            --bg-start: var(--primary-50);
        }

        .to-secondary-50 {
            --bg-end: var(--secondary-50);
        }

        .from-warning-400 {
            --bg-start: var(--warning-400);
        }

        .to-warning-600 {
            --bg-end: var(--warning-600);
        }

        .from-secondary-400 {
            --bg-start: var(--secondary-400);
        }

        .to-secondary-600 {
            --bg-end: var(--secondary-600);
        }

        .from-success-400 {
            --bg-start: var(--success-400);
        }

        .to-success-600 {
            --bg-end: var(--success-600);
        }

        /* 用户头像尺寸 */
        .w-20 {
            width: 5rem;
        }

        .h-20 {
            height: 5rem;
        }

        .w-16 {
            width: 4rem;
        }

        .h-16 {
            height: 4rem;
        }

        .w-8 {
            width: 2rem;
        }

        .h-8 {
            height: 2rem;
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .grid-cols-3 {
                gap: 0.75rem;
            }
            
            .w-16 {
                width: 3rem;
            }
            
            .h-16 {
                height: 3rem;
            }
            
            .text-xl {
                font-size: 1rem;
            }
        }
    </style>
</body>
</html>
